<template>
  <div class="charts_container" ref="echartsPoly"></div>
</template>

<script>
import { echartMoreLine } from '@/mixin/echartMoreLine.js'
export default {
  name: 'pressureChart',
  mixins: [echartMoreLine],
  data () {
    return {
      chartInstance: null,
      reald: null,
      initOption: null,
      timer: null,
      ployData: [],
      colorg: ['rgb(0,108,237)', 'rgb(0,207,255)', 'rgb(0,255,255)', 'rgb(6,253,188)']
    }
  },
  props: {
    chartData: {
      type: Array,
      required: true
    }
  },
  watch: {
    chartData: {
      handler (newVal, oldVal) {
        if (newVal.length > 0) {
          // console.log('newVal终于出来了', newVal, oldVal)
          this.reald = JSON.parse(JSON.stringify(newVal))
          this.timeWay(this.reald)
          var copys = JSON.parse(JSON.stringify(this.reald))
          copys[0].splice(0, 1)
          const seriesGroup = []
          copys[0].forEach((item, index) => {
            seriesGroup.push({
              encode: {
                // 将 "amount" 列映射到 X 轴。
                x: 'createTime',
                // 将 "product" 列映射到 Y 轴。
                y: [item]
              },
              name: item,
              type: 'line',
              symbol: 'circle', // 节点样式
              lineStyle: {
                normal: {
                  width: 2,
                  // color: '#3fb594'
                  color: this.colorg[index]
                }
              },
              itemStyle: {
                color: this.colorg[index],
                // borderColor: 'rgb(0,115,100)',
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0)',
                shadowBlur: 0,
                shadowOffsetY: 0,
                shadowOffsetX: 0
              }
            })
          })
          // this.timer = setTimeout(() => {
          this.updateChart(seriesGroup, this.reald, copys[0][0].slice(-2))
          // }, 800)
        }
      },
      immediate: true
    }
  },
  methods: {
    updateChart (seriesGroup, realData, name) {
      const dataOption = {
        series: seriesGroup,
        yAxis: [{
          name: name
        }],
        xAxis: {
          axisLabel: {
            // interval: name === '温度' ? 10 : 'auto'
            interval: 'auto'
          }
        },
        dataset: {
          source: realData // 数组
        }
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}
</script>

<style  scoped>
.charts_container {
  width: 100%;
  height: 100%;
}
</style>
